<template>
  <div class="loading" :style="$props.isLoading? 'visibility:visible': 'visibility:hidden'">
    <strong style="color:blue;">H</strong>
    <strong style="color:red;">-</strong>
    <strong style="color:black;">Shopping</strong>
    <strong style="color:red;">-</strong>
    <strong style="color:green;">Cart</strong>
  </div>
</template>

<script>
  export default {
    props: {
      isLoading: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style scoped>
  .loading
  {
    font-size:16px;
    font-weight:bolder;
    width: 150px;
    position: fixed;
    top:50%;
    left: 50%;
    margin-left: -75px;
    animation:myLoading 2s infinite;
    z-index: 1000;
  }

  @keyframes myLoading
  {
    0% {transform: perspective(100px) rotateY(0deg);}   
    50% {transform: perspective(100px) rotateY(180deg);}
    100% {transform: perspective(100px) rotateY(360deg);}
  }
</style>